<template>
  <BasicTabs
    v-model="activeTab"
    :tabs="tabs"
    addable
    tab-position="left"
    :autoDestroy="true"
    :all-lazy="true"
    @tabChange="handleTabChange"
  >
    <template #add-icon>添加</template>
    <template #default2> 22222222 </template>
    <template #label2> label2插槽 </template>
    <template #noShow> 你不应该看到这句话 </template>
  </BasicTabs>
</template>

<script setup lang="tsx">
  import Page from './Page.vue'
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'

  const activeTab = ref('1')

  const count = ref(0)

  const handleTabChange = (e) => {
    console.log(activeTab.value, e)
  }

  const handleClickTest = (e) => {
    count.value++
    console.log(activeTab.value, e)
  }

  // 使用 shallowRef
  const tabs = shallowRef<TabPaneItem[]>([
    { name: '1', label: '组件对象', slots: { default: Page, label: Page } },
    { name: '2', label: '插槽', slots: { default: 'default2', label: 'label2' } },
    { name: '3', label: 'vnode直接渲染', slots: { default: h('h1', 'vnode直接渲染') } },
    {
      name: '4',
      label: 'vnode函数返回',
      slots: {
        // 函数式可以响应式传参,否则需要直接传递响应式数据,会造成类型错误
        default: () =>
          h(Page, { title: 'vnode函数返回', params: count.value, onClick: handleClickTest })
      }
    },
    { name: '5', label: 'jsx直接渲染', slots: { default: <h2>jsx直接渲染</h2> } },
    {
      name: '6',
      label: 'jsx函数返回',
      slots: { default: () => <Page title="jsx函数返回" onClick={handleClickTest}></Page> }
    },
    {
      name: '7',
      label: '无权限',
      roles: ['admin1'],
      slots: { default: 'noShow', label: 'noShow' }
    },
    { name: '8', label: '角色权限', roles: ['admin'], slots: { default: () => '角色权限' } },
    { name: '9', label: '菜单权限', roles: ['70000'], slots: { default: () => '菜单权限' } },
    {
      name: '10',
      label: '混合权限',
      roles: ['70000', 'xxxxxx'],
      slots: { default: () => '混合权限' }
    },
    {
      name: '11',
      label: '异步组件',
      slots: { default: () => import('./AsyncPage.vue') }
    },
    {
      name: '12',
      label: '异步传参1',
      slots: {
        default: h(
          defineAsyncComponent(() => import('./AsyncPage.vue')),
          {
            title: '原生写法,复杂不建议使用'
          }
        )
      }
    },
    {
      name: '13',
      label: '异步传参2',
      slots: {
        default: {
          component: () => import('./AsyncPage.vue'),
          props: {
            title: '推荐写法,使用对象形式传参,组件内部已处理'
          }
        }
      }
    },
    {
      name: '14',
      label: '对象写法',
      slots: {
        default: {
          component: Page,
          // 使用computed包裹,防止 对象传参时,props丢失响应式
          props: computed(() => ({
            title: '对象写法传参',
            params: count.value,
            onClick: handleClickTest
          }))
        }
      }
    }
    // {
    //   // 错误示范 使用同步组件时component不能是函数, props会丢失
    //   name: '15',
    //   label: '对象写法异步传参错误示范',
    //   slots: {
    //     default: {
    //       component: () => h(Page, { title: 'vnode2' }),
    //       props: {
    //         title: '异步传递props'
    //       }
    //     }
    //   }
    // },
  ])
</script>
